<!-- Modal -->
<div class="modal fade" id="achatModal" tabindex="-1" role="dialog" aria-labelledby="achatModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title" id="achatModalLabel">Réserver</h3>
      </div>
      <div class="modal-body">
         <h4>Information voyage:</h4>

          <table class="table">
              <tr><th><label>Aperçu </label></th><td class="modalImageVoyage"></td></tr>
              <tr><th><label>Date de départ: </label></th><td id="infoDate"></td></tr>
              <tr><th><label>Durée du séjour: </label></th><td id="infoDuree"></td></tr>
              <tr><th><label>Prix Unitaire : </label></th><td id="infoPrix"></td></tr>
              <tr><th><label>Places restantes : </label></th><td id="infoPlaces"></td></tr>
          </table>
          <h4>Informations Clients:</h4>
          <table class="table infoClient">
              <tr><th><label>Nom</label></th><th><label>Prenom</label></th><th><label>Adresse</label></th><th><label>Mail</label></th></tr>
              <tr><td id="infoNom"></td><td id="infoAdresse"></td><td id="infoPrenom"></td><td id="infoMail"></td></tr>
             
          </table>
          <div >
              <p>Vous n'êtes identifié: si vous avez déjà un compte vous pouvez vous connecter ou alors n'hésitez pas à vous inscrire:</p>
              <button style="float:right;margin-right:10px;" class="btn" id="linkConnexion" data-dismiss="modal" data-toggle="modal" data-target="#connexionModal" data-retour-popup="achatModal">Connexion</button>
              <button style="float:right;margin-right:10px;" class="btn" id="linkInscription" data-dismiss="modal" data-toggle="modal" data-target="#newClientModal" data-retour-popup="achatModal">Inscription</button>
          </div>
          <div style="clear:both;">
            <h4>Commander:</h4>
            <form>
                <input type="text" class="hidden" id="infoIdLigneVoyage" name="infoIdLigneVoyage" />                
                <input type="text" class="hidden" id="infoId" name="infoId" />
            <table class="table">
                <tr><th><label>Nombre de places</label></th><td><select id="nbPlaces" name="nbPlaces"><option value="1">1</option></select></td></tr>
                <tr><th><label>Prix Total</label></th><td id="infoPrixTotal"></td></tr>
            </table>
            </form>
          </div>
          <div id="msgErreurInscription" class="alert alert-danger hidden" role="alert"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="boutonAnnulerCommande">Annuler</button>
        <button type="button" class="btn btn-primary" id="boutonValiderCommande">Valider la commande</button>
      </div>
    </div>
  </div>
</div>
<script>
    $(document).ready(function(){
        var id_ligne_voyage;
        $('#achatModal').on('show.bs.modal', function (event) {
            
            hide($("#msgErreurInscription") );                    
            var button = $(event.relatedTarget); // Button that triggered the modal
            id_ligne_voyage = button.data('lignevoyage'); // Extract info from data-* attributes
            // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
            // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
            var modal = $(this);
            if(id_ligne_voyage){
            modal.find('.modal-title').text('Réserver un voyage: ' + id_ligne_voyage);
            $.ajax({
                type: "POST",
                url: "<?php echo $BASE_URL; ?>HomeController/ajaxGetLigneVoyage",
                data: { id_ligne_voyage: id_ligne_voyage },
                dataType: "json"
            }).done(function( ligneVoyage ) {
                console.log(ligneVoyage);
                modal.find('.modal-title').text('Réserver: '+ligneVoyage.voyage.libelle);
                var tdImg=modal.find('.modalImageVoyage');
                var img = $('<img width="300" >');
                img.attr('src',ligneVoyage.voyage.photo);
                img.attr('title',ligneVoyage.voyage.libelle);
                img.attr('alt',ligneVoyage.voyage.libelle);
                tdImg.html(img);
                modal.find('#infoDate').text(ligneVoyage.dateDep);
                modal.find('#infoPrix').text(ligneVoyage.prixUnit+' €');
                modal.find('#infoPlaces').text(ligneVoyage.placesRestantes);
                modal.find('#infoDuree').text(ligneVoyage.dureeJours+' jours');
                $("#infoIdLigneVoyage").attr("value",ligneVoyage.id);
                var selectNbPlaces = modal.find('#nbPlaces');
                selectNbPlaces.empty();
                for(var i=1;i<=ligneVoyage.placesRestantes;i++){
                    if(i==1){
                    selectNbPlaces.append('<option selected="selected" value="'+i+'" >'+i+'</option>');                        
                    }else{
                    selectNbPlaces.append('<option value="'+i+'" >'+i+'</option>');
                    }
                }
                modal.find('#infoPrixTotal').text(ligneVoyage.prixUnit+' €');
            });
            }
            showInfoUser('<?php echo $BASE_URL; ?>');
        });
        $('#achatModal').on('hidden.bs.modal', function (event) {
            hide($("#msgErreurInscription"));
        }); 
       $( "#nbPlaces" ).change(function() {
        var total =  parseInt($( "#infoPrix").text())* parseInt($( "#nbPlaces").val());
        $( "#infoPrixTotal").text(total+' €');
        });
       
        $("#boutonValiderCommande").click(function() {
            if(confirm('Etes-vous sûr de vouloir réserver ce voyage?')){
                $.ajax({
                    type: "POST",
                    url: "<?php echo $BASE_URL; ?>ReservationController/ajaxCommande",
                    data: { nbPlaces: $("#nbPlaces").val(),id_client: $("#infoId").val(),id_ligne_voyage: $("#infoIdLigneVoyage").val() },
                    dataType: "json"
                }).done(function( data ) {
                    if(data.codeErreur==null && data.idReservation!=null){
                        $('#achatModal').modal('hide');
                        setTimeout(function(){
                            showAlert("La réservation a été réalisée avec succès","alert-success",function(){
                                    $(location).attr('href',"<?php echo $BASE_URL; ?>reservation/show/"+data.idReservation);
                                }
                            );
                        }, 500);
                        // variable portant une fonction
                        
        //alert("La réservation a été réalisée avec succès");
                    }else if(data.codeErreur==1){
                        show($("#msgErreurInscription") );
                        $("#msgErreurInscription").html("Des informations sont manquantes pour faire la réservation");                    
                    }else{
                        show($("#msgErreurInscription") );                    
                        $("#msgErreurInscription").html("Une erreur s'est produite durant l'enregistrement. La réservation n'a pas aboutie");                    
                    }

                });
            }
        });

    });
</script>